
<template>
    <a-row>
        <a-col :span="8">
            <DepartTree @confirm="handleSearch"></DepartTree>
        </a-col>
        <a-divider type="vertical" />
        <a-col :span="15">
            <view>
                <a-row>
                    <a-input-search v-model:value="searchKey" placeholder="请输入数据信息"
                        style="width: 200px; margin-bottom: 10px;" @search="onSearch()" />
                </a-row>

                <a-table :rowKey="(record) => record.id" :row-selection="rowSelection" :dataSource="dataSource"
                    size="small" :columns="columns" bordered :pagination="false">
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="column.dataIndex === 'sex'">
                            <a-tag color="green">{{ text }}</a-tag>
                        </template>
                    </template>
                </a-table>
                <AntdZh>
                    <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                        @change="getList" />
                </AntdZh>
            </view>
        </a-col>
    </a-row>
</template>
<script setup>
import DepartTree from '@/custom/organization/components/DepartTree'
import { queryList } from '../api/users';
const dataSource = ref([]);
const total = ref(1)
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });
const emit = defineEmits(["staffSelection",]);
// 定义表格列配置
const columns = [
    {
        title: '姓名',
        dataIndex: 'nickName',
        key: 'nickName',
    },
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
    },
    {
        title: '部门ID',
        dataIndex: 'deptId',
        key: 'deptId',
    },
];


const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        emit("staffSelection", selectedRows)
    },
    getCheckboxProps: record => ({
        id: record.id,
    }),
};

function handleSearch(key) {
    console.log(key);
}
/** 搜索按钮操作 */
function onSearch() {

}

/** 提交按钮 */
function submitItem() {

}
function getList() {
    queryList(query.value).then(res => {
        console.log(res)
        dataSource.value = res.content
        total.value = res.totalElements;
    })
}
getList()
</script>
  